<template>

	<uni-modal v-if="show">
		<div class="uni-mask"></div>
		<form class="uni-modal" :style="{width : width +'px' , 'margin-left' : (-width/2+100) + 'px'}" :data-action="action" @submit="submit" >
			<div class="uni-modal__hd"><strong class="uni-modal__title">{{title}}</strong></div>
			<div class="uni-modal__bd">
				<slot></slot>
			</div>
			<div class="uni-modal__ft">
				<div class="uni-modal__btn uni-modal__btn_default" v-if="showCancel" @tap="$emit('cancel')" style="color: rgb(0, 0, 0);">{{cancelText}}</div>
				<button class="uni-modal__btn uni-modal__btn_primary" v-if="showConfirm" :style="{color:confirmColor}" form-type="submit">{{confirmText}}</button>
			</div>
		</form>
	</uni-modal>

</template>

<script>
	import form from "../common/form.js" ;
	export default {
		name: "alertForm",
		props: {
			title: {
				default: "提示"
			},
			show: {
				type : Boolean ,
				default: false
			},
			action: {
				default: ""
			},
			confirmText: {
				default: "确定"
			},
			cancelText: {
				default: "取消"
			},
			confirmColor: {
				default: "#5d83f7"
			},
			showCancel:{
				default : true 
			},
			showConfirm:{
				default : true 
			},
			width : {
				default : 400
			}
		},
		methods: {
			submit:function(e){
				form.submit(e,this.success , this.fail);
			},
			success: function(res) {
				this.$emit("success", res);
			},
			fail: function(res) {
				uni.showToast({
					title: res.err,
					icon: 'none'
				});
				this.$emit("fail", res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-modal .uni-modal {
		max-width: 10000px;
		animation: fadeInUp 0.3s;
		.uni-modal__bd{
			text-align: left;
		}
	}
	.uni-modal__btn{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		background-color: #fff;
	}
	uni-modal .uni-modal__bd{
		max-height:800px;
	}
</style>
